<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
		<title>APP</title>
		<link rel="stylesheet" type="text/css" href="../css/api.css" />
		<link rel="stylesheet" type="text/css" href="../css/aui.css" />
		<!--<link rel="stylesheet" type="text/css" href="../css/common.css" />-->
		<style>
			#con {
				margin: 10px;
				font-size: 28px;
			}
			ul {
				margin-bottom: 10px;
			}
			.txt {
				margin: 5px 10px;
				padding: 5px;
				color: #000;
				word-wrap: break-word;
			}
			* {
				margin: 0;
				padding: 0;
				border-width: 0;
			}
			body {
				text-align: center;
				background-color: black;
			}
			/*canvas {
			 background-color: black;
			 position: absolute;
			 }*/
			canvas {
				left: 5px;
				top: 5px;
				margin:0;				
				width: 350px;
				height: 400px;
				position: absolute;
				background-color: black;
				border: 1px solid red;
			}
			.spirit {
				position: absolute;
				width: 5px;
				height: 5px;
				background-color: red;
			}
			.homeFooter {
				position: fixed;
				bottom: 0;
				height: 45px;
				width: 100%;
				box-sizing: border-box;
				display: block;
				background-color: #81a9c3;
			}
			.homeFooter > nav, .homeFooter > nav > ul {
				height: 100%;
			}
			.homeFooter > nav > ul {
				-webkit-box-orient: horizontal;
				padding: 5px;
				border-top: 1px solid #fff;
				white-space: nowrap;
				text-align: center;
				list-style-type: none;
			}
			.homeFooter > nav > ul > li {
				display: block;
				float: left;
				width: 23%;
				padding: 2px;
			}
			.homeFooter > nav > ul > li > span:active {
				color: rgba(0,135,233,1);
				height: 30px;
				line-height: 30px;
				font-size: 1.0em;
				font-weight: 600;
			}
			.homeFooter > nav > ul > li > span {
				color: rgba(99,194,233,1);
				height: 30px;
				line-height: 30px;
				font-size: 1.0em;
				font-weight: 600;
			}
			.homeFooter > nav > ul > li > h2 {
				font-size: 1.0em;
				font-weight: 600;
				color: rgba(99,194,233,1);
			}
		</style>
	</head>
	<body>
		<canvas id='contain'></canvas>
		<footer class="homeFooter" id="footer">
			<nav>
				<ul>
					<li tapmode=""  onclick="Interpolation()">
						<span class="am-icon-sm6  am-icon-back">插值</span>
					</li>
					<li apmode=""  onclick="Redraw()">
						<span class="am-icon-sm6  am-icon-back">重绘</span>
					</li>
					<li  tapmode="" onclick="Clear()">
						<span class="am-icon-sm6  am-icon-cut">清除</span>
					</li>
					<li tapmode="" onclick="Save()">
						<span class="am-icon-sm6  am-icon-picture-o" >保存</span>
					</li>
				</ul>
			</nav>
		</footer>
	</body>
	<script type="text/javascript" src="../script/api.js"></script>
	<script type="text/javascript" src="../script/sign.js"></script>
	<!--<script type="text/javascript" src="../script/picture.js"></script>-->
	<script type="text/javascript">
	
			
		var	sig = null;	
		
		function Interpolation(){		
		sig.interpolation(10);
		}
		
		function Redraw(){
		sig.redraw(10);
		}
					
		function Clear(){
			sig.clear();
			//sig.drawGrid();
		}

		function Save(){
			console.log(sig.toString());
			alert(sig.toString());		
		}
		
				
		apiready = function() {
		var h=api.frameHeight;
		var w=api.frameWidth;
		
		console.log(w+','+h);
			var can=document.getElementById("contain");
			var foot=document.getElementById("footer");
			var pos=getOffset(foot);
			
			can.style.top="0px";
			can.style.left="0px";
			can.style.width=w-2+"px";
			can.style.height=h-2-pos.h+"px";			
					
			sig=new Sign("contain",360,450);
			sig.Init();
			//sig.drawGrid();
			
			var device={};
			device.deviceName=api.deviceName;
			device.deviceModel=api.deviceModel;
			device.deviceId=api.deviceId;
			device.systemType=api.systemType;
			device.systemVersion=api.systemVersion;
			
			sig.setDevice(device);
			console.log(JSON.stringify(device));
			//console.log(api.systemVerison);
			//contain.width=winW;
			//contain.height=winH-50;
		};
	</script>
</html>